<template>
  <div class="product-display">
    <Header></Header>
    <div class="headers">
        <div class="image">
            <img src="../../../static/img/logo_1.png" alt="">
        </div>
        <h2>产品展示</h2>
    </div>
    <div class="product-list">
        <ul>
            <li v-for="(productDisplayLists, index) in productDisplayList" :key="index">
                <div>
                    <router-link :to="{name:'ProductDetails',params:{id:productDisplayLists.id}}">
                        <img :src="productDisplayLists.cover" alt="">
                    </router-link>   
                </div>
                <h3>
                    <router-link :to="{name:'ProductDetails',params:{id:productDisplayLists.id}}">{{productDisplayLists.title}}</router-link> 
                </h3>
            </li>
        </ul>
    </div>
    <div class="fixeds" v-show="topShow" ref="viewBox">
            <a href="#">
                <img src="../../../static/img/back-top.png" alt="">
            </a>
    </div>
    <p>已经到最后了</p>
    <Footer></Footer>
    <Interactive></Interactive>
  </div>
</template>
<script>
import Header from '../productVideo/components/Header'
import Footer from '../home/components/Footer'
import Interactive from '../interactive/Interactive'
export default {
  name: 'ProductDisplay',
  data(){
      return {
          productDisplayList: [],
          topShow: true
      }
  },
  components: {
      Header,
      Footer,
      Interactive
  },
  created(){
      this.axios.get('/articles/index',{
          params: {
            per_page: 6,
            page: 1,
            category: 4
          }
      })
      .then((res) => {
          this.productDisplayList = res.data.data;
          console.log(res.data.data);
      })
      .catch((error) => {
          console.log(error);
      })
  }
}
</script>
<style scoped>
.product-display{
    width: 100%;
    height: auto;
    padding-bottom: .97rem;
}
.product-display .headers{
    width: 100%;
    height: .6rem;
    background-color: #1d2977;
    line-height: .6rem;
}
.product-display .headers .image{
    float: left;
    width: .53rem;
    height: .53rem;
    margin-left: .2rem;  
}
.product-display .headers .image img{
    width: 100%;
    height: auto;
}
.product-display .headers h2{
    font-size: .3rem;
    color: #fff;
    float: left;
    font-weight: bold;
}
.product-display .product-list{
    width: 100%;
    height: auto;
    margin-top: .2rem;
    margin-bottom: .5rem;
    
}
.product-display .product-list ul li{
    width: 3.11rem;
    height: 3.47rem;
    display: inline-block;
    text-align: center;
    margin-left: .45rem;
    margin-top: .3rem;
}
.product-display .product-list ul li div{
    width: 3rem;
    height: 3rem;
}
.product-display .product-list ul li div img{
    width: 100%;
    height: 3rem;
}
.product-display .product-list ul li h3{
    font-size: 14px;
    color: #333;
    margin-top: .15rem;
    height: .4rem;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}
.product-display .fixeds{
    width: .7rem;
    height: .7rem;
    position: fixed;
    bottom: 2.5rem;
    right: .3rem;
}
.product-display .fixeds img{
    width: 100%;
    height: auto;
}
.product-display p{
  width: 100%;
  height: auto;
  text-align: center;
  font-size: .26rem;
  color: #1d2977;
  margin-top: .49rem;
  margin-bottom: .9rem;
}
@media screen and (max-width: 320px) {
.product-display .product-list ul li h3{
    font-size: 14px;
    color: #333;
    margin-top: .15rem;
    height: .5rem;
    overflow: hidden;
}
} 
</style>
